<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="a_vuejs/vue.global.js"></script>
</head>

<body>

<div id="myApp">
    <h3>当我们选择select下拉的时候 所选中的值是实时显示的</h3>
    <select v-model="selectedValue">
        <option  v-for="city in citys" v-bind:value="city.code">{{city.name}}</option>
    </select><br/>
    所选中的城市:{{selectedValue}}<br/>
    个人自我介绍:<br/>
    <textarea cols="20" rows="5" v-model="desc">

    </textarea><br/>
    {{desc}}<br/>

    <h3>checkbox选中</h3>
    爱好:<br/>
    足球、<input type="checkbox" v-model="hobbies" value="zq"><br/>
    乒乓球、<input type="checkbox" v-model="hobbies" value="ppq"><br/>
    羽毛球、<input type="checkbox" v-model="hobbies" value="ymq"><br/>
    跑步、<input type="checkbox" v-model="hobbies" value="pb"><br/>
    {{hobbies}}<br/>
    <ol>
        <li v-for="h in hobbies" v-text="h"></li>
    </ol>
</div>

</body>

<script>
    const app = Vue.createApp({
        data(){
            return{
                selectedValue:'fz',
                citys:[
                    {code:'bj',name:'北京'},
                    {code:'tj',name:'天津'},
                    {code:'nj',name:'南京'},
                    {code:'sh',name:'上海'},
                    {code:'fz',name:'福州'}
                ],
                desc:'个人自我介绍',
                hobbies:[] //checkbox一般是数组
            }
        }
    }).mount('#myApp')
</script>

</html>